<template>
	<view class="new-users copy-data" :style="{height:pageHeight}">
		<liu-pageTab-bar index='4' :activeColor="'#333'"></liu-pageTab-bar>
		<view>
			<view style="height: 100%;">
				<view class="bg"></view>
				<view class="head pad30">
					<view class="sign dis" @click="goSignIn">
						<!-- <view class="sign-left">
							<image src="@/static/com/icon_qd.png" mode=""></image>
						</view> -->
						<view class="sign-right">
							<view class="sign-left-tit">签到</view>
							<view class="sign-left-bom">
								<view class="sign-left-bom-left">积分：{{userInfo.integral||0}}</view>
								<view class="sign-left-bom-right">
									<image src="@/static/com/icon_more.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="order-wrapper headnav">

						<view class="star">

							<view class="dis" >
								星级:<uni-rate v-model="userInfo.level" size="16" :readonly='true' />
							</view>
							<view v-if="userInfo.uid">ID:{{userInfo.uid}}</view>


						</view>
						<view class="user-card">
							<view class="user-info">
								<view class="vipName" v-if="userInfo.tags">
									<view v-for="(item,index) in userInfo.tags"
										:style="[{backgroundImage:'url(' + comApi+'/crmebimage/public/maintain/2024/01/12/8df4a0afb09e484d94506034829b5853yg6go8j76f.png' + ')' }]">
										{{item}}
									</view>
									<!-- <image :src="userInfo.vipIcon" alt="">
										<view style="margin-left: 10rpx;" class="vip-txt">
											{{userInfo.vipName || ''}}
										</view> -->
								</view>
								<view class="headBj">
									<image class="avatar" :src='userInfo.avatar' @tap="gochange" v-if="userInfo.avatar">
									</image>
									<image v-else class="avatar" src="/static/images/f.png" mode="" @click="goEdit()">
									</image>
								</view>
								<!-- @click="goEdit()" -->

								<view class="info">

									<view class="name" v-if="userInfo.nickname" @tap="openAuto">
										{{userInfo.nickname!=''?userInfo.nickname:'用户'}}
									</view>

									<view class="num" v-if="userInfo.phone" @click="goEdit()">
										<view class="num-txt">{{userInfo.phone}}</view>
										<view class="icon">
											<image src="/static/images/edit.png" mode=""></image>
										</view>
									</view>
									<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
								</view>
							</view>

						</view>

					</view>

				</view>

				<view class="head pad30">


					<view class="order-wrapper">
						<view class="order-hd flex">
							<view class="left">订单中心</view>
							<!-- <navigator class="right flex" hover-class="none" url="/pages/users/order_list/index"
								open-type="navigate">
								查看全部
								<text class="iconfont icon-xiangyou"></text>
							</navigator> -->
						</view>
						<view class="order-bd">
							<block v-for="(item,index) in orderMenu" :key="index">
								<navigator class="order-item" hover-class="none" :url="item.url">
									<view class="pic">
										<image :src="comApi+'crmebimage/public/content/2024/03/07/'+item.img" mode="">
										</image>
										<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
									</view>
									<view class="txt">{{item.title}}</view>
								</navigator>
							</block>
						</view>
					</view>

				</view>

				<view class="contenBox">
					<!-- <image src="../../static/logo.png" mode=""></image> -->
					<view class="gg " @click="sharePoster"
						:style="[{backgroundImage:'url(' + comApi+'crmebimage/public/maintain/2023/11/27/18a4cc9a559c4eaba166423cc6bae9e2kdd4jp4nl8.png' + ')' }]">


					</view>

				</view>
				<view class="head pad30">


					<view class="order-wrapper">

						<view class="order-hd flex">

							<view class="left">我的工具</view>
							<!-- <navigator class="right flex" hover-class="none" url="/pages/users/order_list/index"
								open-type="navigate">
								查看全部
								<text class="iconfont icon-xiangyou"></text>
							</navigator> -->
						</view>
						<view class="order-bd">
							<block v-for="(item,index) in myTool" :key="index">
								<view class="order-item" hover-class="none" @click="goMenuPage(item.url,item)"
									v-if="item.url!='zskf'">
									<view class="pic">
										<!-- comApi+' -->
										<image :src="comApi+'crmebimage/public/content/2024/03/07/'+item.img" mode="">
										</image>
										<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
									</view>
									<view class="txt">{{item.title}}</view>
								</view>
								<view class="order-item" hover-class="none" v-else>
									<button open-type='contact' hover-class='none'>
										<view class="pic">
											<image :src="comApi+'crmebimage/public/content/2024/03/07/'+item.img"
												mode=""></image>
											<text class="order-status-num" v-if="item.num > 0">{{ item.num }}</text>
										</view>
										<view class="txt">{{item.title}}</view>
										<!-- <span class="iconfont icon-kefu"></span><span></span> -->
									</button>

								</view>
								<view class="" v-else>

								</view>
							</block>
						</view>

					</view>

				</view>

			<!-- 	<view class="rz dis pad30" @click="goMenuPagesh('/pagesA/applyFor/cooperation/index')">
					农场主、商家、农文旅申请入驻
					<image src="@/static/com/icon_more.png" mode=""></image>
				</view> -->


			</view>
		</view>
		<view class="ding">

		</view>

		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<!-- 海报弹框 -->
		<!-- <uni-popup ref="popup" type="center">
		
		</uni-popup> -->
		<!-- posterData -->

		<!-- :abImg='userInfo.avatar!=""?userInfo.avatar:"https://oss.zhangyubk.com/cmqrcode.jpg"' -->
		<qrcode-poster ref="poster" :title="userInfo.nickname" :abImg='userInfo.avatar'></qrcode-poster>
		<uni-popup ref="addPeplePup" type="center">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis">
					<view class="">

					</view>
					<view class="safeguardPup-head-center">您的好友赠送您一个共富认养大礼包,请点击领取</view>
					<view class="safeguardPup-head-right" @click="this.$refs.addPeplePup.close()">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>
				<view class="safeguardPup-msg dis">
					<uni-forms ref="baseForm">
						<uni-forms-item label="转赠送人" name="name" :labelWidth='90'>
							<uni-easyinput v-model="phone" type="number" maxlength="4" placeholder="请输入转赠人手机号后四位" />
						</uni-forms-item>

					</uni-forms>
					<view class="safeguardPup-btn">
						<view @click="this.$refs.addPeplePup.close()">取消</view>
						<view class="safeguardPup-btn-s" @click="addPepleBtn()">确定</view>
					</view>

				</view>

			</view>

		</uni-popup>
		<home></home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'
	import {
		getTransOrderGet
	} from '@/api/togeterRich/order.js'
	import QrcodePoster from '@/pages/user/com/poster.vue'
	import {
		getApplyMemberInfo,
		getApplyMemInfo
	} from '@/api/togeterRich/index.js'
	import {
		HTTP_ADMIN_URL,
		HTTP_REQUEST_URL,
		HEADER,
		TOKENNAME,
		HEADERPARAMS
	} from '@/config/app';
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getMenuList
	} from '@/api/user.js';
	import {
		orderData
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getCity
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	export default {
		components: {
			home,
			QrcodePoster,
			// #ifdef MP
			authorize
			// #endif
		},

		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				ooo:0,
				// 海报开始
				is_show_model: false, //是否显示分享模态窗
				// 海报结束
				myTool: [{
						img: 'icon_zskf.png',
						title: '专属客服',
						url: 'zskf',
						num: 0
					},
					{
						img: 'icon_xxzx.png',
						title: '消息中心',
						url: '/pagesA/consult/news',
						num: 0
					},
					{
						img: 'icon_lq.png',
						title: '领券',
						url: '/pages/users/user_get_coupon/index',
						num: 0
					},
					{
						img: 'icon_wdyhq.png',
						title: '我的优惠券',
						url: '/pages/users/user_coupon/index',
						num: 0
					},
					{
						img: 'icon_wdsc.png',
						title: '我的收藏',
						url: '/pages/users/user_goods_collection/index',
						num: 0
					},
					{
						img: 'icon_shdz.png',
						title: '收货地址',
						url: '/pages/users/user_address_list/index',
						num: 0
					},
					{
						img: 'icon_yhsc.png',
						title: '用户手册',
						url: '/pages/users/privacy/manual',
						num: 0
					}, {
						img: 'icon_yhxy.png',
						title: '用户协议',

						url: '/pages/users/privacy/index?key=user_agreement',
						num: 0
					}, {
						img: 'icon_sfsq.png',
						title: '身份申请',
						url: '/pagesA/applyFor/idCard/index',
						num: 0
					}, {
						img: 'icon_jfcj.png',
						title: '积分抽奖',
						url: '/pagesA/poinTraffle/index',
						num: 0
					}, {
						img: 'icon_phb.png',
						title: '排行榜',
						url: '/pages/users/commission_rank/index',
						num: 0
					}, {
						img: 'icon_sys.png',
						title: '扫一扫',
						url: '扫一扫',
						num: 0
					},
					{
						title: "云端溯源",
						img: 'ydsy.png',
						url: '/pagesA/fromClouds/index'
					},
					{
						title: "积分商城",
						img: 'jfsc.png',
						url: '/pagesA/pointReward/index'
					},
					{
						title: "农文旅入驻",
						img: 'icon_nwlrz.png',
						url: '/pagesA/applyFor/cooperation/index'
					},


				],
				orderMenu: [{
						img: 'icon_rydd.png',
						title: '共富认养',
						url: '/pagesB/fosterOrder/index?status=10',
						num: 0
					},
					{
						img: 'icon_scdd.png',
						title: '商城订单',

						url: '/pagesB/shoppingMall/index?status=10',
						num: 0
					},
					{
						img: 'icon_jfdd.png',
						title: '积分订单',
						url: '/pagesB/shoppingPoints/index?status=10',
						num: 0
					},

					{
						img: 'icon_rydd.png',
						title: '研学团建',
						url: '/pagesB/childStudy/index?status=10',
						num: 0
					},
					{
						img: 'icon_rytgdd.png',
						title: '社区团购',

						url: '/pagesB/groupBuy/index?status=10',
						// 
						num: 0
					},
					{
						img: 'icon_xsqgdd.png',
						title: '限时抢购',
						url: '/pagesB/flashSale/index?status=10',
						num: 0
					},
					{
						img: 'icon_cgyy.png',
						title: '场馆预约',
						url: '/pagesB/venueReservation/index?status=10',
						num: 0
					}, {
						img: 'icon_msdd.png',
						title: '民宿',

						url: '/pagesB/hotole/index?status=10',
						num: 0
					}, {
						img: 'icon_cydd.png',
						title: '餐饮',
						url: '/pagesB/catering/index?status=10',
						num: 0
					}, {
						img: 'icon_rydd.png',
						title: '售后',
						url: '/pages/users/user_return_list/index',
						num: 0
					},
					{
						img: 'icon_rydd.png',
						title: '挂号记录',
						url: '/pagesB/hospital/index?status=-1',
						num: 0
					},

				],
				imgUrls: [],
				userMenu: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				MyMenus: [],
				wechatUrl: [],
				servicePic: '/static/images/customer.png',
				sysHeight: sysHeight,
				// #ifdef MP
				pageHeight: '100%',
				// #endif
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin(),
				//#endif
				comApi: '',
				canCode: "",
				phone: '',
				posterData: {}
			}
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo']),
		onLoad() {

			if (uni.getStorageSync('LOGOUT') == 'T') {
				this.$router.go(0)
				uni.setStorageSync('LOGOUT', 'F');
			}


			let that = this;
			this.comApi = HTTP_ADMIN_URL
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			that.$set(that, 'MyMenus', app.globalData.MyMenus);
			if (!this.$Cache.has('cityList')) this.getCityList();
			if (that.isLogin == false) {
				// #ifdef H5
				toLogin()
				// #endif
			}
		},
		onShow: function() {

			let that = this;
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.pageHeight = res.windowHeight + 'px'
				}
			});
			// #endif
			if (that.isLogin) {
				this.getMyMenus();
				// this.setVisit();
				this.getOrderData();
				this.$store.dispatch('USERINFO');
			} else {
				toLogin();
			}
		},
		methods: {
			gochange() {
				uni.navigateTo({
					url: "/pages/users/user_info/index"
				})
			},
			addPepleBtn() {
				let data = {
					code: this.phone,
					orderNo: this.canCode.result
				}

				getTransOrderGet(data).then(res => {
					this.$refs.addPeplePup.close()
					console.log(res, 'ddd')
					uni.showModal({
						title: '领取成功',
						content: '恭喜您领取成功赠送礼包，请到我的-认养订单里查看',
						showCancel: true,
						cancelText: '知道了',
						confirmText: '去查看',
						success: res => {

							if (res.confirm) {
								uni.navigateTo({
									url: '/pagesB/fosterOrder/index?status=10'
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				})


			},
			//生成海报
			//分享海报
			sharePoster() {

				//获取带参数二维码并传递
				this.is_show_model = false
				this.$refs.poster.showCanvas()
			},
			//关闭海报

			// 记录会员访问
			// setVisit(){
			// 	setVisit({
			// 		url:'/pages/user/index'
			// 	}).then(res=>{})
			// },
			navito(e) {
				window.location.href = 'https://' + e;
			},
			kefuClick() {
				location.href = this.chatUrl;
			},
			getOrderData() {
				let that = this;
				orderData().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.unPaidCount
								break
							case '待发货':
								item.num = res.data.unShippedCount
								break
							case '待收货':
								item.num = res.data.receivedCount
								break
							case '待评价':
								item.num = res.data.evaluatedCount
								break
							case '售后/退款':
								item.num = res.data.refundCount
								break
						}
					})
					that.$set(that, 'orderMenu', that.orderMenu);
				})
			},
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			// 授权回调
			onLoadFun() {
				this.getMyMenus();
				// this.setVisit();
				this.getOrderData();
			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 绑定手机
			bindPhone() {
				uni.navigateTo({
					url: '/pages/users/app_login/index'
				})
			},
			/**
			 * 
			 * 获取个人中心图标
			 */
			getMyMenus: function() {
				let that = this;
				if (this.MyMenus.length) return;
				getMenuList().then(res => {
					that.$set(that, 'MyMenus', res.data.routine_my_menus);
					that.wechatUrl = res.data.routine_my_menus.filter((item) => {
						return item.url.indexOf('service') !== -1
					})
					res.data.routine_my_menus.map((item) => {
						if (item.url.indexOf('service') !== -1) that.servicePic = item.pic
					})
					if (res.data.routine_my_banner) {
						that.imgUrls = res.data.routine_my_banner
					}
				});
			},
			// 编辑页面
			goEdit() {
				console.log(this.isLogin, 'this.isLoginthis.isLogin')
				if (this.isLogin == false) {
					toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}
			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: '/pages/users/user_sgin/index'
				})
			},
			// goMenuPage
			goMenuPage(url, item) {
				let that = this
				if (url == 'zskf') {
					this.kefuClick()
					return;
				}
				if (this.isLogin) {
					if (item.title == '身份申请') {
						getApplyMemberInfo().then(res => {
							if (res.data && res.data.status == 0) {
								uni.showToast({
									title: "您的资料正在审核请等待...",
									icon: 'none',
									duration: 2000
								})
								return;
							} else if (res.data && res.data.status == 1) {
								that.module(url, '申请成功', '您的申请成功可再次申请', '再次申请')
								return;
								uni.showToast({
									title: "您申请成功",
									icon: 'none',
									duration: 2000
								})
								return;
							} else if (res.data && res.data.status == 2) {
								console.log(res.data, ';res.data')
								let rrr = ''
								if (res.data && res.data.failReason) {
									rrr = res.data.failReason
								} else {
									rrr = '您的申请失败请重新申请'
								}

								that.module(url, '申请失败', rrr, '重新申请')
								return;
							} else {
								uni.navigateTo({
									url
								})
							}




							// if (res.data && res.data.status !== 2) {
							// 	uni.showToast({
							// 		title: "您已会员身份或者正在审核请等待...",
							// 		icon: 'none',
							// 		duration: 2000
							// 	})
							// 	return;
							// } else if (res.data && res.data.status == 2) {
							// 	that.module(res, url, '重新申请')
							// } else {
							// 	uni.navigateTo({
							// 		url
							// 	})
							// }

						})
					} else if (item.title == '扫一扫') {
						uni.scanCode({
							success: function(res) {
								console.log("扫除杀了", res)
								if (res) {
									that.$refs.addPeplePup.open()
									that.canCode = res
								}


							},
							complete(com) {
								console.log(com, '坐那里了')
							}
						});
					}else if(item.title == '农文旅入驻'){
						this.goMenuPagesh(url)
					}else {
						
						uni.navigateTo({
							url
						})
					}

				} else {
					console.log("shad ")
					// #ifdef MP
					this.openAuto()
					// #endif
				}

			},
			goMenuPagesh(url) {
				let that = this;
				getApplyMemInfo().then(res => {

					if (res.data && res.data.status == 0) {
						uni.showToast({
							title: "您的资料正在审核请等待...",
							icon: 'none',
							duration: 2000
						})
						return;
					} else if (res.data && res.data.status == 1) {
						uni.showToast({
							title: "您申请成功",
							icon: 'none',
							duration: 2000
						})
						return;
					} else if (res.data && res.data.status == 2) {
						// module
						let rrr = ''
						if (res.data && res.data.failReason) {
							rrr = res.data.failReason
						} else {
							rrr = '您的申请失败请重新申请'
						}

						that.module(url, '申请失败', rrr, '重新申请')
						// that.module(res, url, '重新申请')
						return;
					} else {
						uni.navigateTo({
							url
						})
					}


					//  (res.data && res.data.status == 2) {

					// 	that.module(res, url, '重新申请')
					// 	return;
					// } 

				})

			},
			module(url, tit, content, confirmText) {

				uni.showModal({
					title: tit,
					content: content,

					showCancel: true,
					cancelText: '知道了',
					confirmText: confirmText,
					success: res => {
						// console.log(res, 'resdd')
						if (res.confirm) {
							uni.navigateTo({
								url
							})

						}

					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					let oneDay = 24 * 3600 * 1000;
					this.$Cache.setItem({
						name: 'cityList',
						value: res.data,
						expires: oneDay * 7
					}); //设置七天过期时间
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headBj {
		width: 260rpx;
		height: 260rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.vipName {
		position: absolute;
		top: 12%;
		left: 16%;

		view {
			// background: red;
			color: #F8C361;
			padding: 10rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			margin-bottom: 10px;

			background-size: 100% 100%;
		}
	}

	.star {
		height: 200rpx;
		position: absolute;
		top: 23px;
		right: 0px;
	}

	.rz {
		font-size: 24rpx;
		color: #333;
		margin: 40rpx 0;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.headnav {
		height: 220rpx;
		margin-top: 200rpx !important;
	}

	page,
	body {
		height: 100%;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 420rpx;
		background: $maincolor;

		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.contenBox {

		padding: 0 30rpx;
		width: 90%;
		margin: 0 auto;
		height: 200rpx;

		.gg {
			height: 100%;


			background-size: 100% 100%;
		}

		// image{
		// 	width: 100%;
		// 	height: 200rpx;
		// }

	}

	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;

		.sys-head {
			position: relative;
			width: 100%;
			background: linear-gradient(90deg, $bg-star1 0%, $bg-end1 100%);

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}

		.head {
			position: relative;
			// background: linear-gradient(360deg, rgba(255, 121, 49, 0) 0%, rgba(248, 74, 29, 0.82) 39%, #E93323 100%);
			// // padding: 0 30rpx;





			.sign {
				.sign-right {
					margin-left: 10rpx;

					.sign-left-bom {
						display: flex;
						justify-content: space-between;
						color: #999;
						align-items: center;
						font-size: 18rpx;

						.sign-left-bom-right {
							width: 20rpx;
							height: 20rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.sign-left-tit {
						font-size: 26rpx;
						color: #333;
					}
				}

				.sign-left {
					width: 35rpx;
					height: 35rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				z-index: 200;
				position: absolute;
				right: -12rpx;
				top: -68%;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 210rpx;
				height: 88rpx;
				background: #fff;
				border-radius: 29rpx 4rpx 4rpx 29rpx;
				color: #282828;
				font-size: 28rpx;
				font-weight: bold;
			}

			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;
				padding: 35rpx 0 30rpx 0;

				.user-info {
					position: relative;
					z-index: 20;
					text-align: center;
					margin: 0 auto;

					margin: -114px auto;

					.avatar {
						width: 240rpx;
						height: 240rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						padding: 15rpx 0;

						.name {

							color: #000;
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							/* 限制在三行 */
							-webkit-box-orient: vertical;

							.vip {
								display: flex;
								align-items: center;
								padding: 6rpx 20rpx;
								background: $maincolor;
								color: #fff;
								border-radius: 18px;
								font-size: 22rpx;
								margin-left: 12rpx;
								width: 40%;
								text-align: center;
								margin: 30rpx auto;
								justify-content: center;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);

							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}
				}

				.num-wrapper {
					z-index: 30;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30rpx;
					color: #fff;

					.num-item {
						width: 33.33%;
						text-align: center;

						.num {
							font-size: 42rpx;
							font-weight: bold;
						}

						.txt {

							margin-top: 10rpx;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);
						}
					}
				}


			}

			.order-wrapper {
				background-color: #fff;
				border-radius: 14rpx;
				padding: 30rpx 16rpx;
				position: relative;
				z-index: 11;
				margin-top: 30rpx;

				.order-hd {
					justify-content: space-between;
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 40rpx;
					padding: 0 16rpx;

					.left {
						color: #282828;
						font-size: 30rpx;
						font-weight: 600;
					}

					.right {
						align-items: center;
						color: #666666;
						font-size: 26rpx;

						.icon-xiangyou {
							margin-left: 5rpx;
							font-size: 24rpx;
						}
					}
				}

				.order-bd {
					display: flex;
					align-items: center;

					flex-wrap: wrap;
					justify-content: flex-start !important;

					/* 左对齐*/
					.order-item {

						width: 20%;
						text-align: center;
						margin: 20rpx 0;


						// margin: 20rpx auto;
						// width: 20%;
						// display: flex;
						// flex-direction: column;
						// // justify-content: center;
						// align-items: center;

						.pic {
							position: relative;
							// text-align: center;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.txt {
							height: 80rpx;
							margin-top: 15rpx;
							font-size: 23rpx;
							color: #454545;
						}
					}
				}

			}
		}

		.slider-wrapper {
			margin: 20rpx 0;
			height: 138rpx;

			swiper,
			swiper-item {
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-menus {
			background-color: #fff;
			border-radius: 14rpx;

			.menu-title {
				padding: 30rpx 30rpx 40rpx;
				font-size: 30rpx;
				color: #282828;
				font-weight: 600;
			}

			.list-box {
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}

			.item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				width: 25%;
				margin-bottom: 47rpx;
				font-size: 26rpx;
				color: #333333;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 18rpx;
				}


				&:last-child::before {
					display: none;
				}
			}

			button {
				font-size: 28rpx;
			}
		}

		.phone {
			color: #fff;
		}

		.order-status-num {

			min-width: 12rpx;
			background-color: #fff;
			color: #ee5a52;
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 20rpx;
			padding: 0 8rpx;
			border: 1px solid #ee5a52;
		}
	}

	.safeguardPup-wrap {
		.safeguardPup-msg {
			width: 80%;

			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;
			text-align: center;

			.safeguardPup-btn {
				width: 100%;

				display: flex;
				justify-content: space-around;
				align-items: center;

				.safeguardPup-btn-s {
					background: $maincolor;
					color: #fff;
				}

				view {
					padding: 10rpx 80rpx;
					border: 2rpx solid #999;
					border-radius: 100rpx;
				}
			}
		}

		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		width: 600rpx;
		/* height: 600rpx; */
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
	}
</style>